<template>
  <div class="w-full h-screen box-border relative overflow-hidden">
    <div
      class="w-full h-[24vh] flex flex-row justify-start items-center box-border pl-3 relative overflow-hidden user-bg"
    >
      <van-image width="70px" height="70px" :src="logo" round />
      <div class="mx-3 flex-1 flex flex-col text-white">
        <div class="text-[16px]">
          <span>{{ $t('userID') }}</span>
          <span class="mr-1">:</span>
          <span>{{ user.userInfo.id }}</span>
        </div>
        <div class="text-[14px]">
          {{ user.userInfo.username }}
        </div>
      </div>
      <div class="flex justify-end items-center bg-[#b2b2b2] box-border px-2 py-1 rounded-l-3xl text-white" @click="open(tiktokUrl)">
        <van-image width="26px" height="26px" :src="logo" round />
        <span class="text-[16px] ml-2">Tiktok</span>
        <span class="ml-1">>></span>
      </div>
    </div>
    <div class="flex flex-col justify-start box-border p-3 border-solid border-[1px]">
      <div class="flex justify-between items-center">
        <div>{{ $t('balance') }}</div>
        <van-button 
          type="default" 
          round 
          size="small"
          color="linear-gradient(-90deg, #a147ff, #f52a2a)"
          @click="router.push('/gift')"
        >
          <template #icon>
            <van-icon 
              name="like" 
              size="1.4rem" 
              color="linear-gradient(-90deg, #fec3d0, #fffcfd)" 
            />
          </template>
          <div>{{ $t('btnText.donationNowMoney') }}</div>
        </van-button>
      </div>
      <div class="text-[32px] font-bold">
        {{ balance }}
      </div>
      <div class="flex justify-between items-center mt-3 gap-8">
        <van-button 
          type="default" 
          plain 
          round 
          block 
          color="#f2ba0f" 
          @click="router.push('/withdraw')"
        >
          <span class="text-[#f43a3a]">
            {{ $t('btnText.immediateWithdrawal') }}
          </span>
        </van-button>
        <van-button type="danger" round block @click="router.push('/recharge')">
          {{ $t('btnText.goRecharge') }}
        </van-button>
      </div>
    </div>
    <div class="flex flex-col justify-start box-border p-3">
      <div class="flex justify-between items-center mt-3 gap-8">
        <div 
          class="flex flex-row justify-start items-center gap-2"
          @click="open(tiktokMallUrl)"
        >
          <div class="bg-[#dcdee0] box-border p-1">
            <van-icon name="shopping-cart-o" size="30px" />
          </div>
          <div class="flex flex-col justify-start">
            <span class="text-[16px] font-bold">
              {{ $t('tikTokMall') }}
            </span>
            <span class="text-[12px]">
              {{ $t('tikTokMallDesc') }}
            </span>
          </div>
        </div>
        <div 
          class="flex flex-row justify-start items-center gap-2" 
          @click="router.push('/setting')"
        >
          <div class="bg-[#dcdee0] box-border p-1">
            <van-icon name="setting-o" size="30px" />
          </div>
          <div class="flex flex-col justify-start">
            <span class="text-[16px] font-bold">
              {{ $t('securityCenter') }}
            </span>
            <span class="text-[12px]">
              {{ $t('securityCenterDesc') }}
            </span>
          </div>
        </div>
      </div>
      <div class="flex justify-between items-center mt-6 gap-8">
        <van-button 
          type="default" 
          block 
          color="#dcdee0" 
          @click="router.push('/records')"
        >
          <div class="text-black">
            {{ $t('pageTitle.balanceRecords') }}
          </div>
        </van-button>
        <van-button
          type="default" 
          block 
          color="#dcdee0" 
          @click="router.push('/tradeRecords')"
        >
          <div class="text-black">
            {{ $t('pageTitle.tradeRecords') }}
          </div>
        </van-button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import logo from "@/assets/images/logo.png"

import { useUserStore } from "@/store/user"

import { Decimal } from "decimal.js"

import { useRouter } from "vue-router"

import { open } from "@/utils/index"

const router = useRouter()

const user = useUserStore()

onBeforeMount(() => user.loadWallet())

const balance = computed(() => new Decimal((user?.wallet?.balance || 0)).toFixed(2))

const tiktokUrl = user.config ? user.config['customer.config.tiktokUrl'] : ''

const tiktokMallUrl = user.config ? user.config['customer.config.tiktokMallUrl'] : ''
</script>

<style lang="less" scoped>
.user-bg {
  background: url('@/assets/images/user-bg.png')no-repeat;
  background-size: 100% 100%;
} 
</style>
